<template>
  <div class="main">
    <MyVideo v-if="video.deviceSerial" :video="video" @huifang="huifang" />
    <el-dialog
      :title="dialogName"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :destroy-on-close="true"
    >
      <div :style="{ width: '100%', height: '100%' }">
        <iframe
          width="640"
          height="480"
          frameborder="0"
          class="rec-frame"
          :src="iframeSrc"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getCameraListApi } from '@/api/surveillance'
import MyVideo from '../surveillance/components/MyVideo.vue'
export default {
  name: 'SurveillanceView',
  components: {
    MyVideo
  },
  data () {
    return {
      video: {},
      dialogName: '',
      dialogVisible: false,
      iframeSrc: '',
      id: ''
    }
  },
  async mounted () {
    this.id = this.$route.params.id
    console.log(this.id)
    await this.getCameraList()
    const item = this.list.find((item) =>
      item.cameraList.find((i) => i.id == this.id)
    )
    console.log('item', item)
    // const result = this.list.find(item => item.cameraList.some(camera => camera.nvr === this.deviceSerial))
    const result = this.list.find((item) =>
      item.cameraList.find((i) => i.id == this.id)
    )
    const res = result.cameraList.find((i) => i.id == this.id)
    console.log('res', res)
    this.video = {
      deviceSerial: res.nvr,
      orgNo: res.buro,
      id: this.id,
      channel: res.channel,
      name: item.orgName + '/' + res.name,
      type: res.type
    }
  },
  methods: {
    async getCameraList () {
      const res = await getCameraListApi()
      this.list = res?.data.list
      console.log(this.list)
    },
    huifang (accessToken, deviceSerial, name) {
      this.iframeSrc = `https://open.ys7.com/ezopen/h5/iframe_se?url=ezopen://open.ys7.com/${deviceSerial}/1.local.rec&accessToken=${accessToken}`
      this.dialogName = name
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.main {
  width: 100%;
  height: 99.6%;
}
</style>
